<template>
  <TopoDesigner @node-selected="handleNodeSelected" />
  <div class="toolbar">
    <div>当前图形:</div>
    <el-form v-model="formData" :label-width="60" :disabled="!topoStore.currentNode">
      <el-form-item prop="width" label="宽">
        <el-input-number v-model="formData.width"></el-input-number>
      </el-form-item>
      <el-form-item prop="height" label="高">
        <el-input-number v-model="formData.height"></el-input-number>
      </el-form-item>
      <el-form-item prop="fontSize" label="字号">
        <el-input-number v-model="formData.fontSize"></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import TopoDesigner from '@/components/topo-designer/index.vue';
import { setNodeProperties } from '@/components/topo-designer/service';
import { useTopoStore } from '@/store/topo';

defineOptions({
  name: 'Dashboard',
});

const topoStore = useTopoStore();

const formData = ref({
  width: 0,
  height: 0,
  fontSize: 12,
});

const handleNodeSelected = (node: any) => {
  console.log('node', node);
  if (!node) {
    return;
  }
  topoStore.currentNode = node;
  const {
    properties: { width, height, fontSize },
  } = node;
  formData.value.width = width;
  formData.value.height = height;
  formData.value.fontSize = fontSize;
};

watch(
  () => formData.value,
  () => {
    if (!topoStore.currentNode) {
      return;
    }
    const { width, height, fontSize } = formData.value;
    setNodeProperties(topoStore.currentNode.id, { width, height, fontSize });
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.toolbar {
  width: 300px;
  position: fixed;
  right: 20px;
  top: 20px;
  background-color: #ccc;
  padding: 20px;
  .el-form {
    margin-top: 20px;
  }
}
</style>
